---
interface Review {
  name: string;
  role: string;
  content: string;
  image: string;
}

const reviews: Review[] = [
  {
    name: 'Aman Mittal',
    role: 'Docs Maintainer @Expo',
    content: `One of the <strong>best starter apps</strong> that feel complete to get started creating your Expo and React Native app. It's rare to see a project keeping up with the latest developments in the React Native world in a fast-changing environment, <strong>production-ready</strong> at the same time, and with such clear documentation around it.<br/><strong>Hats off to the Obytes team</strong> for creating it and actively maintaining it!`,
    image: '/aman.jpg',
  },
  {
    name: 'Yuri P. Baumgartner',
    role: 'React Native Developer',
    content: `The <strong>best React Native starter project ever!</strong> 🔥 <br/>I'm a React Native developer with more than 5 years of experience and I've seen a lot of React Native projects, templates and boilerplates but this is the <strong>best one</strong>. Here we have all of the steps to build an app from scratch to production.<br/>The section that I really <strong>love</strong> is the Environment Variables, you make the really great way to handling this, guys!<br/>Thank u all 🩶`,
    image: '/yuri.jpeg',
  },

  {
    name: 'Simon',
    role: 'Founder @Galaxies_dev',
    content:
      'This template combines all the latest React and React Native <strong>best practices</strong> in one powerful starter. Combined with additional GitHub actions to build your app, this is one of the most future-proof React Native templates - and it’s even <strong>free!</strong>',
    image: 'simon.jpg',
  },
  {
    name: 'Kawtar CHOUBARI',
    role: 'React/React Native Developer',
    content:
      'This boilerplate has everything needed to build a robust mobile app. It <strong>saves a lot of time</strong> and I highly recommend 👌',
    image: '/kawtar.jpg',
  },
  {
    name: 'Brandon Eichhorn',
    role: 'Developer',
    content: '<strong>You guys are life savers!</strong>',
    image: '/brandon.png',
  },
];
---

<section class="reviews not-content">
  <h3 class="reviews-title">Trusted by React Native Developers Worldwide</h3>
  <p class="reviews-subtitle">
    Developers love our starter! Check out what they're saying:
  </p>
  <div class="review-grid">
    {
      reviews.map((review) => (
        <article class="review-content">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="130"
            height="130"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="quote-icon"
          >
            <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" />
          </svg>
          <div class="review-text">
            <Fragment set:html={review.content} />
          </div>
          <div class="review-footer">
            <img
              src={`/reviews/${review.image}`}
              alt={review.name}
              class="review-image"
            />
            <p class="review-author">
              <strong>{review.name}</strong>
              <span class="review-role">{review.role}</span>
            </p>
          </div>
        </article>
      ))
    }
  </div>
  <a
    href="https://github.com/obytes/react-native-template-obytes/discussions/357"
    class="add-review-link"
    target="_blank"
  >
    Love the template? Let us know ⭐️
  </a>
</section>

<style>
  .reviews {
    margin: 4rem 0;
    padding-top: 6rem;
  }
  .reviews-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    margin: 0 auto;
    color: var(--sl-color-white);
  }
  .reviews-subtitle {
    font-weight: 400;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 2rem;
  }
  .review-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  }

  .review-footer {
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
    padding-top: 2rem;
  }
  .review-author {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    opacity: 0.8;
  }
  .review-role {
    font-size: 0.8rem;
    opacity: 0.8;
  }

  .review-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 1rem;
  }
  .review-content {
    border-radius: 1rem;
    border: 1px solid var(--sl-color-gray-5);
    background-color: var(--sl-color-black);
    padding: clamp(1rem, calc(0.125rem + 3vw), 2.5rem);
    flex-direction: column;
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
  }

  .review-text {
    font-style: italic;
    margin: 0;
    font-size: clamp(
      var(--sl-text-sm),
      calc(0.5rem + 1vw),
      var(--sl-text-body)
    );
    strong {
      color: var(--sl-color-white);
    }
  }

  .quote-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 68px;
    height: 68px;
    opacity: 0.2;
  }

  .add-review-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    margin: 2rem auto 0;
    color: var(--sl-color-text-accent);
    font-size: 0.9rem;
  }

  .add-review-link:hover {
    text-decoration: underline;
  }
</style>
